import React from 'react';
import { Navigate, BrowserRouter  as Router, useRoutes, Link } from "react-router-dom";

import NotFound from "./views/NotFound";
import Film from "./views/films/Film";

import NowPlaying from "./views/films/NowPlaying";
import ComingSoon from "./views/films/ComingSoon";
import Games from "./views/game/Games";

function MyRoute(props) {
    const routes = useRoutes([{
        path: '/films',
        element: <Film />,
        children: [{
            path: '',
            element: <Navigate to='/films/nowPlaying' />
        },{
            path: '/films/nowPlaying',
            element: <NowPlaying />
        },{
            path: 'comingSoon',
            element: <ComingSoon />
        }]
    }, 
    {
        path: '/games',
        element: <Games />
    },
    {
        path: '/',
        element: <Navigate to='/films' />
    }, 
    {
        path: '*',
        element: <NotFound />
    }])
    return routes
  }

class App extends React.Component{
  render() {
    return (
      <div>
        <Router>
          <ul>
            <li><Link to="/films">电影</Link></li>
            <li><Link to="/games">游戏</Link></li>
          </ul> 
          <MyRoute/>
        </Router>
        
      </div>
    );
  }
}

export default App;

